<template>
  <div class="note-card" :class="rootClasses">
    <div class="d-flex align-start">
      <div class="note-card__left mr-2">
        <div class="note-card__icon">
          <v-avatar :class="{ 'border-white': showUserAvatar }" :size="28">
            <v-img v-if="showUserAvatar" :alt="note.user_name" :src="note.user_avatar" />
            <v-icon v-else color="rgba(255,255,255,.7)" :icon="iconForType" size="19" />
          </v-avatar>

          <DirectionBadge v-if="hasDirection" :is-outbound="isOutbound" />
        </div>
      </div>
      <div class="note-card__bubble flex-grow-1">
        <!-- 邮件类型 - 子组件托管 -->
        <EmailNote v-if="isEmail" :note="note" />
        <!-- 事件类型 - 子组件托管 -->
        <EventNote v-else-if="isEvent" :note="note" />
        <!-- 其他方向型类型（如社交/通讯渠道） - 使用通用消息组件 -->
        <MessageNote v-else-if="isDirectionalType" :note="note" />
        <!-- 普通笔记类型 - 子组件托管（用户笔记） -->
        <UserNote v-else :note="note" />

        <!-- 统一标签展示（入站标签 + 非入站标签） -->
        <div class="mt-1">
          <InboundTagChips :tags="note.tags || []" />
          <template v-if="otherTags.length > 0">
            <v-chip
              v-for="tag in otherTags"
              :key="tag"
              class="mr-2 mb-1"
              size="small"
              variant="outlined"
            >
              <v-icon :icon="mdiTag" size="small" start /> {{ tag }}
            </v-chip>
          </template>
        </div>

        <!-- 统一三按钮（赞/评论/分享） -->
        <div
          class="note-actions-floating d-flex align-center flex-0-0"
          :class="{ always: hasEngagement }"
        >
          <v-btn class="handle-btn" size="small" variant="text">
            <v-icon :icon="mdiThumbUpOutline" size="16" />
            <span v-if="likeCount > 0" class="text-caption ml-1">{{ likeCount }}</span>
          </v-btn>
          <v-btn class="handle-btn" size="small" variant="text">
            <v-icon :icon="mdiCommentOutline" size="16" />
            <span v-if="commentCount > 0" class="text-caption ml-1">{{ commentCount }}</span>
          </v-btn>
          <v-btn class="handle-btn" size="small" variant="text">
            <v-icon :icon="mdiShareVariantOutline" size="16" />
          </v-btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { Note } from '../types'
import EmailNote from './system/EmailNote.vue'
import EventNote from './system/EventNote.vue'
import MessageNote from './system/MessageNote.vue'
import UserNote from './system/UserNote.vue'
import DirectionBadge from '@/windows/activity/components/common/DirectionBadge.vue'
import { getIconByType } from '../icons'
import InboundTagChips from './common/InboundTagChips.vue'
import { INBOUND_TAG_BY_KEY } from '../services/inboundTags'
import { mdiCommentOutline, mdiShareVariantOutline, mdiTag, mdiThumbUpOutline } from '@mdi/js'

const props = defineProps<{ note: Note }>()

// 类型 & 状态判定
const noteType = computed(() => props.note.type)
const isEmail = computed(() => noteType.value === 'email')
const isEvent = computed(() => noteType.value === 'event')
const isUserNote = computed(() => noteType.value === 'note')
// 除了 note 和 event 之外的都视为方向型（需要展示发出方->接收方）
const isDirectionalType = computed(() => !isUserNote.value && !isEvent.value)

// 方向（支持三态: true/false/undefined）
const directionRaw = computed(() => props.note.is_outbound)
const hasDirection = computed(() => typeof directionRaw.value === 'boolean')
const isOutbound = computed(() => directionRaw.value === true)
const isInbound = computed(() => directionRaw.value === false)

// 图标与头像展示
const iconForType = computed(() => getIconByType(noteType.value))
// 仅普通笔记（note）显示用户头像；其余类型显示品牌图标
const showUserAvatar = computed(() => isUserNote.value && !!props.note.user_avatar)

// 根节点修饰类（用于样式控制）

const rootClasses = computed(() => ({
  'note-card--inbound': isInbound.value,
  'note-card--outbound': isOutbound.value,
  'note-card--event': isEvent.value
}))

// 统一标签 & 互动计数
const otherTags = computed<string[]>(() => {
  const tags = props.note.tags ?? []
  return tags.filter(t => !(INBOUND_TAG_BY_KEY as any)[t])
})

const likeCount = computed<number>(() => {
  const n: any = props.note
  if (typeof n.like_count === 'number') return n.like_count
  if (Array.isArray(n.likes)) return n.likes.length
  return 0
})
const commentCount = computed<number>(() => {
  const n: any = props.note
  if (typeof n.comment_count === 'number') return n.comment_count
  if (Array.isArray(n.comments)) return n.comments.length
  return 0
})
const hasEngagement = computed(() => likeCount.value > 0 || commentCount.value > 0)
</script>
<style scoped>
/* 卡片样式（BEM 命名，状态通过根节点修饰类控制） */
.note-card {
  position: relative;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

/* 浮动操作条（悬停显示/有互动常显） */
.note-actions-floating {
  position: absolute;
  right: 8px;
  bottom: 6px;
  display: flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 2;
}

.note-card__bubble:hover .note-actions-floating,
.note-actions-floating.always {
  opacity: 1;
  pointer-events: auto;
}
.handle-btn {
  padding: 0 10px;
  min-width: 0;
}

.note-card:hover {
  transform: none;
  box-shadow: none !important;
}

/* 左侧头像区域 */
.note-card__left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2px;
  width: 30px;
}

/* 头像圆形背景 */
.note-card__icon {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 内容气泡 */
.note-card__bubble {
  position: relative;
  border-radius: 14px;
  padding: 8px 14px;
  background-color: rgba(var(--v-theme-surface), 1);
  border: 2px solid transparent;
}

/* 状态色：入站/出站/事件 */
.note-card.note-card--inbound .note-card__icon {
  background-color: rgba(var(--v-theme-success), 0.7);
}
.note-card.note-card--outbound .note-card__icon {
  background-color: rgba(var(--v-theme-warning), 0.7);
}
.note-card.note-card--event .note-card__icon {
  background-color: rgba(var(--v-theme-info), 0.7);
}

.note-card.note-card--inbound .note-card__bubble {
  border-color: rgba(var(--v-theme-success), 0.6);
}
.note-card.note-card--outbound .note-card__bubble {
  border-color: rgba(var(--v-theme-warning), 0.5);
}
.note-card.note-card--event .note-card__bubble {
  border-color: rgba(var(--v-theme-info), 0.7);
}
</style>

<i18n>
{
  "zhHans": {

    "edited": "已编辑",
    "readOnly": "只读",
    "edit": "编辑",
    "delete": "删除",
    "like": "赞",
    "comment": "评论",
    "share": "分享",
    "from": "发件人",
    "to": "收件人",
    "cc": "抄送",
    "system": "系统消息",
    "noSubject": "无主题",
    "attendees": "参与者",
    "confirmDelete": "确认删除该笔记？",
    "type": {
      "personal": "个人笔记",
      "company": "公司笔记",
      "contact": "联系人笔记",
      "email": "邮件",
      "event": "事件"
    }
  },
  "en": {

    "edited": "Edited",
    "readOnly": "Read-only",
    "edit": "Edit",


    "delete": "Delete",
    "like": "Like",
    "comment": "Comment",
    "share": "Share",
    "from": "From",
    "to": "To",
    "cc": "CC",
    "system": "System",
    "noSubject": "No Subject",
    "attendees": "Attendees",
    "confirmDelete": "Are you sure you want to delete this note?",
    "type": {
      "personal": "Personal",
      "company": "Company",
      "contact": "Contact",
      "email": "Email",
      "event": "Event"
    }
  }
}
</i18n>
